<template>

  <div style=" position: fixed;
            height: 3rem;
            width: auto;
            left: 0;
            top: 0;
            z-index: 999;//一直将导航栏置于最顶层
            background-color: white; //设置导航栏背景颜色"
  >
    <div style="margin: auto;/*border:2px solid #ddd*/;display: inline-block">
      <!--        <div  :style="{display: isCollapse===0?'none':'flow',transition: 'opacity, 3s'}">-->
      <el-collapse-transition>
        <div v-show="isCollapse!==0" style="display: flex">
          <el-menu class="el-menu-vertical-demo"
                   :collapse="isCollapse!==1"
          >
            <el-menu-item @click="menuClick('主页','/index')">
              <i class="el-icon-location"></i>
              <template slot="title">
                <span slot="title">首页</span>
              </template>
            </el-menu-item>
            <el-menu-item disabled="">
              <i class="el-icon-edit"></i>
              <span slot="title">记录一下</span>
            </el-menu-item>
            <el-menu-item @click="menuClick('笔记列表','/note')">
              <i class="el-icon-s-order"></i>
              <span slot="title">笔记列表</span>
            </el-menu-item>
            <el-menu-item @click="menuClick('合集','/note/compilation/Compilation')">
              <i class="el-icon-document"></i>
              <span slot="title">合集</span>
            </el-menu-item>
<!--            <el-menu-item @click="menuClick('随机漫步','/note/CardMove')">-->
<!--              <i class="el-icon-cold-drink"></i>-->
<!--              <span slot="title">随机漫步</span>-->
<!--            </el-menu-item>-->
            <el-menu-item @click="menuClick('随机检测','/note/RandomTesting')">
              <i class="el-icon-magic-stick"></i>
              <span slot="title">随机回顾</span>
            </el-menu-item>
            <el-menu-item>
              <i class="el-icon-search"></i>
              <span slot="title">检索</span>
            </el-menu-item>
            <el-menu-item disabled>
              <i class="el-icon-headset"></i>
              <span slot="title">音乐盒</span>
            </el-menu-item>
            <el-menu-item disabled>
              <i class="el-icon-film"></i>
              <span slot="title">视频</span>
            </el-menu-item>
            <el-menu-item disabled>
              <i class="el-icon-picture-outline-round"></i>
              <span slot="title">照片</span>
            </el-menu-item>
            <el-menu-item @click="menuClick('我的信息','/user/profile')">
              <i class="el-icon-male"></i>
              <span slot="title">我自己</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-collapse-transition>
      <el-button type="warning" icon="el-icon-loading" circle @click="menuBtnClick" style="margin: 15px"></el-button>
    </div>

  </div>

</template>

<script>
export default {
  name: 'MenuBox',
  data() {
    return {
      isCollapse: 0
    }
  },
  methods: {
    menuBtnClick() {
      this.isCollapse = (this.isCollapse + 1) % 3
      console.log(' this.isCollapse ', this.isCollapse)
    },
    menuClick(title, eventName) {
      this.$tab.openPage(title, eventName)
      console.log(' menuClick(eventName)', title, eventName)
      this.$emit('closeLogin')
      //关闭菜单的方法
      this.$emit('closeMenuAndFloating')
      this.isCollapse = 0
    }
  }
}
</script>

<style scoped>

</style>
